<template>
  <div class="control">
    <div class="btn" @click="zoomIn">放大</div>
    <div class="btn" @click="zoomOut">缩小</div>
    <div class="btn" @click="zoomReset">重置大小</div>
  </div>
</template>
<script>
export default {
  props: {
    lf: Object,
  },
  methods: {
    zoomIn() {
      this.lf.zoom(true);
    },
    zoomOut() {
      this.lf.zoom(false);
    },
    zoomReset() {
      this.lf.resetZoom();
    },
  },
};
</script>
<style lang="scss" scoped>
.control {
  position: absolute;
  right: 240px;
  top: 30px;
  display: flex;
  align-items: center;
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  background: #ffffff;
  .btn {
    height: 28px;
    line-height: 28px;
    padding: 0 12px;
    user-select: none;
    cursor: pointer;
    &:not(:last-child) {
      border-right: 1px solid #e8e8e8;
    }
  }
}
</style>
